import { useEffect, useRef } from 'react';
import hljs from 'highlight.js';
import copyText from 'copy-to-clipboard';
import { message } from 'antd';
import './index.less';

const HighLight: React.FC = ({ children }) => {
    const container = useRef<HTMLDivElement>(null);
    useEffect(() => {
        container.current!.querySelectorAll('pre code').forEach((el) => {
            hljs.highlightElement(el as HTMLElement);
            const copy = document.createElement('span');
            copy.innerText = '复制';
            copy.className = 'copy';
            copy.onclick = () => {
                copyText((el as HTMLElement).innerText);
                message.success('复制成功');
            }
            el.parentNode!.appendChild(copy);
        });
    }, [children]);

    return <div ref={container} className="markdown">
        {children}
    </div>
}

export default HighLight;